<template>
  <div>
    <el-dialog width="500px" :title="title" @close="() => close()" v-model="dialogVisible">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          {{ title }}
        </span>
      </template>
      <el-form size="default" :model="formdata" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="昵称">
          {{ formdata.user.name }}
        </el-form-item>
        <!-- 团队成员昵称 -->
        <!-- <el-form-item label="姓名" :for="'username'">
          <el-input id="username" size="default" v-model="formdata.username"></el-input>
        </el-form-item> -->
        <el-form-item label="手机号" :for="'phonenum'">
          <el-input id="phonenum" size="default" disabled v-model="formdata.user.phonenum"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-radio-group size="default" v-model="formdata.isAdmin">
            <el-radio :value="0">团员</el-radio>
            <el-radio :value="2">教师</el-radio>
            <!-- <el-radio :value="1" disabled>管理员</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择团队组" :for="'teamusergroupid'">
          <el-select id="teamusergroupid" size="default" v-model="formdata.teamusergroupid" placeholder="请选择">
            <el-option v-for="item in group" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :for="'context'">
          <el-input id="context" size="default" v-model="formdata.context" type="textarea"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button size="default" @click="dialogVisible = false">取 消</el-button>
          <el-button size="default" type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { computed, reactive, ref, watch } from "vue";
import { asyncteamchangeteamuser } from "../../../api";
import study from "../../../mysql_interface/studycodemodel";

const p = defineProps<{
  ID?: number,
  teamid?: number,
  teamuser?: study.Iteamuser,
  group: any[],
  start: Function,
  close: Function,
}>()

const dialogVisible = ref(false);
const title = computed(() => {
  if (p.ID) {
    return "修改";
  }
  return "创建";
});
// 选中的用户id
const userinfo = reactive<study.Iuser>({});

const formdata = reactive(<study.Iteamuser>(p.teamuser));

watch(
  () => p.teamuser,
  () => {
    Object.assign(formdata, p.teamuser);
  }
);

// 确认修改-接口有问题 是add 会更新加入时间 admin接口改为v2/team
async function submit() {
  if (userinfo.ID) {
    formdata.userid = userinfo.ID;
  }
  formdata.jurisdiction = "0";
  formdata.teamid = Number(p.teamid);
  try {
    await asyncteamchangeteamuser(formdata);
    ElMessage.success(title.value + "成功");
    dialogVisible.value = false;
    if (p.start) p.start();
  } catch (e: any) {
    ElMessage.error(e);
  }
}

function setdialogVisible(t: boolean) {
  dialogVisible.value = t;
}
defineExpose({
  setdialogVisible
})

</script>
